<template>
  <div>
    <swiper
      :options="swiperOptions"
      :modules="[Autoplay]"
      @swiper="onSwiper"
      @slideChange="onSlideChange"
    >
      <swiper-slide>
        <div class="banner-content">
          <div class="banner-box">
            <div class="en-text">
              Share with friends and get discounts at the same time
            </div>

            <div class="title-tips">分享有礼 同享钜惠</div>
            <div class="title-text">
              无门槛加入 | 分享获同等优质服务 | 多推多送
            </div>
            <div class="banner-btn-box">
              <com-button class="me" type="primary" radius="radius-all"
                >联系我们 ></com-button
              >
              <com-button class="buy-btn" type="primary" radius="radius-all"
                >立即生成专属海报 ></com-button
              >
            </div>
          </div>
        </div>
      </swiper-slide>

      <!-- ... 其他 slides -->
    </swiper>
  </div>
</template>

<script lang="ts" setup>
import { Swiper, SwiperSlide } from "swiper/vue";
import ComButton from "@/components/com-button/com-button.vue";
import "swiper/swiper-bundle.css";
import { Autoplay } from "swiper/modules";

import "swiper/css";

import { ref } from "vue";
const swiperOptions = ref({
  slidesPerView: 1,
  spaceBetween: 30,
});

const onSwiper = (swiper: any) => {
  console.log(swiper);
};

const onSlideChange = () => {
  console.log("slide change");
};
</script>
<style scoped lang="less">
@import "@/style/var.less";
@import "./share-banner.less";
</style>
